<template>
  <div class="wrap clearfix">
    <div class="location">
      当前位置：首页<span>&gt;</span><b class="red">购物车</b>
    </div>
    <ToBody
      :list="list"
      :checkAll="checkAll"
      :isshowAll="isshowAll"
      @changeshow="changeshow"
      @clearcheck="clearcheck"
      @changeAll="changeAll"
      @clearData="clearData"
      :total="total"
      :totalprice="totalprice"
      :preferential="preferential"
      @deletes="deletes"
    >
    </ToBody>
  </div>
</template>

<script>
import ToBody from './components/ToBody.vue'
export default {
  components: {
    ToBody,
  },
  data() {
    return {
      list: [
        {
          name: '凌美Lamy Safari钢笔/签字笔T52黑色墨水<',
          id: 0,
          oldPrice: 158.0,
          price: 129.0,
          count: 0,
          // img: 'https://img-blog.csdnimg.cn/20200520143727974.jpg',
          isSelected: true,
        },
        {
          name: '凌美Lamy Safari钢笔/签字笔T52黑色墨水<',
          id: 1,
          oldPrice: 158.0,
          price: 145.0,
          count: 0,
          // img: 'https://img-blog.csdnimg.cn/20200520143752215.jpg',
          isSelected: false,
        },
        {
          name: '德国进口 凌美(LAMY)签字笔钢笔墨水水笔专用一次性墨水胆笔芯5支一盒T10德国进口',
          id: 2,
          oldPrice: 158.0,
          price: 130.0,
          count: 0,
          // img: 'https://img-blog.csdnimg.cn/20200520143746317.jpg',
          isSelected: true,
        },
      ],
    }
  },
  methods: {
    // changeshow(id) {
    //    this.list.forEach(item=>{
    //     console.log(item.count),item.id===id?item.count+=1:item.count
    //    })
    // },

    // 给购物车加数量
    changeshow(id) {
      this.list.forEach((item) => {
        if (item.id === id) {
          item.count++
        }
      })
    },

    clearcheck(id) {
      this.list.forEach((item) => {
        if (item.id === id && item.count > 0) {
          item.count--
        }
      })
    },

    //  点全选框其他的跟着一起选中
    changeAll(a) {
      this.list.forEach((item) => (item.isSelected = !a))
    },

    //  删除选中的所有数组
    clearData() {
      this.list = this.list.filter((item) => !item.isSelected)
    },


    // 删除选中的那一项

    deletes(id){
      this.list=this.list.filter(item=>item.id!==id)
    }
  },
  computed: {
    // 全选框
    checkAll() {
      return this.list.every((item) => item.isSelected)
    },
    isshowAll() {
      return this.list.some((item) => item.isSelected)
    },

    // 计算选中商品的总量
    total() {
      return this.list
        .filter((item) => item.isSelected)
        .reduce((prev, item) => prev + item.count, 0)
    },

    // 计算总价格
    totalprice() {
      return this.list
        .filter((item) => item.isSelected)
        .reduce((prev, item) => prev + item.oldPrice * item.count, 0)
    },
    // 计算优惠后的价格
    preferential() {
      return this.list
        .filter((item) => item.isSelected)
        .reduce((prev, item) => prev + item.price * item.count, 0)
    },
  },
}
</script>

<style>
/* 公共样式 */
.clearfix {
  content: '';
  display: block;
  clear: both;
}

.red {
  color: #f30213;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 清除默认样式 */
* {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
}

a {
  text-decoration: none;
  color: #333;
}

input {
  outline: none;
}

.wrap {
  width: 1180px;
  margin: 0 auto;
}

.wrap .location {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.cartTable {
  border: 1px solid #ccc;
}

.cartTable tr.title {
  background-color: rgb(241, 243, 244);
  font-weight: bold;
}

.cartTable tbody tr td {
  /* border: 1px solid rgb(245, 245, 245); */
  padding: 10px;
}

/* 原价 */
.cartTable tbody tr td .tdl {
  text-decoration: line-through;
  color: #999;
}

/* 商品数量 */
.cartTable tr .amount .unum {
  width: 70px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  float: left;
}

/* 数量加减按钮 */
.cartTable tr .amount a {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.cartTable tr .amount a.Increase {
  border-right: none;
  float: left;
}

.cartTable tr .amount a.Reduce {
  border-left: none;
  float: left;
}

.cartTable tr.count .jiesuan .right {
  text-align: right;
}

.cartTable tr.count .jiesuan .right p {
  margin: 5px 0;
}

.cartTable tr.count .jiesuan .right .pay {
  display: block;
  width: 160px;
  height: 50px;
  line-height: 50px;
  background-color: #f30213;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
</style>
